<template>
  <div class="order">
    <div class="order-top">
      <!-- 顶部Nav区域  -->
      <nav-bar ref="navBar">
        <template v-slot:center>
          <span style="font-size: 0.16rem; color: #fff">订单列表</span>
        </template>
      </nav-bar>
      <!-- tab标签页 -->
      <van-tabs v-model:active="active" @click-tab="changeStatus">
        <van-tab v-for="item in listType" :title="item.type" :key="item.type"> </van-tab>
      </van-tabs>
      <!-- 列表区域 -->
    </div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="pull-refresh">
      <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div class="order-item" v-for="item in list" :key="item.id" @click="toOrderDeatil(item.id)">
          <div class="order-title">
            <span>订单编号 </span>
            <span>{{ item.order_no }}</span>
          </div>
          <div class="order-title">
            <span>创建时间 </span>
            <span>{{ item.updated_at }}</span>
          </div>
          <van-card
            :num="goods.num"
            :price="goods.goods.price"
            :desc="goods.goods.description"
            :title="goods.goods.title"
            :thumb="goods.goods.cover_url"
            v-for="goods in item.orderDetails.data"
            :key="goods.id"
          />
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import UseTabBar from 'hooks/tabbar/UseTabBar'
import { useRouter } from 'vue-router'
import { getorderList } from 'network/order'
import { reactive, ref } from '@vue/reactivity'
export default {
  name: 'Order',
  setup(props) {
    UseTabBar()
    // 生成路由实例
    const router = useRouter()

    // 当前选择的种类
    let active = ref(0)
    // 订单列表的种类
    const listType = reactive([
      { type: '全部', status: 0 },
      { type: '待付款', status: 1 },
      { type: '已支付', status: 2 },
      { type: '发货', status: 3 },
      { type: '交易完成', status: 4 },
      { type: '过期', status: 5 }
    ])
    const list = ref([])
    const loading = ref(false)
    const finished = ref(false)
    const refreshing = ref(false)
    // 请求参数
    const params = reactive({
      page: 1,
      status: 0,
      include: 'orderDetails.goods'
    })
    // 订单总数
    let total = ref(0)
    /* 
      List 组件通过 
      loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，
      会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，
      数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，
      则直接将 finished 设置成 true 即可。 
    */
    const loadData = async () => {
      if (refreshing.value) {
        // 清空数据
        list.value = []
        // 结束刷新
        refreshing.value = false
        // 请求第一页
        params.page = 1
      }
      const res = await getorderList(params)
      ++params.page
      total.value = res.meta.pagination.total
      list.value.push(...res.data)
      loading.value = false

      if (list.value.length >= total.value) {
        finished.value = true
      }
    }

    const onLoad = () => {
      // 获取订单数据
      loadData()
    }

    const onRefresh = () => {
      // 清空列表数据
      finished.value = false

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      loading.value = true
      onLoad()
    }
    function changeStatus(data) {
      params.status = data.name
      // 重新刷新
      refreshing.value = true
      // 数据重新加载
      loadData()
    }
    // 跳转到订单详情页
    function toOrderDeatil(id) {
      router.push({
        path: '/orderdetail',
        query: {
          id
        }
      })
    }
    return {
      listType,
      active,
      params,
      loadData,
      total,
      changeStatus,
      toOrderDeatil,

      list,
      onLoad,
      loading,
      finished,
      onRefresh,
      refreshing
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep(.van-tabs__line) {
  background: #42b983;
}

::v-deep(.van-tabs__nav) {
  width: 100vw;
  padding-left: 0;
}

.order-top {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  z-index: 100;
}

.order-title {
  padding: 0.16rem 0.16rem 0.08rem 0.32rem;
}
.pull-refresh {
  margin-top: 0.88rem;
}
</style>